<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			.balance{
				text-align: center;
				background-color: #FFFFFF;
				padding: 5px 0;
				margin: 10px 0;
			}
			
			.balance p #balance{
				font-weight: bold;
				font-size: 24px;
				color: #FEB406;
				display: block;
				margin: 4px;
			}
			
			h5 .mui-pull-right {
				font-size: 14px;
				color: #6D6D72;
			}
			
			form.mui-input-group {
				margin-bottom: 30px;
			}
			
			p.preout {
				display: none;
				margin: 0;
			}
			
			p.preout span {
				color: #FEB406;
				margin: 0 4px;
			}
			
			.mui-popover#accountList .mui-table-view {
				color: #333333;
			}
			
			.mui-popover#inputArea {
				background-color: #FFFFFF;
				padding: 10px;
			}
			
			table.number_input {
				background-color: #FFFFFF;
				width: 80%;
				margin: 20px 10%;
				left: 10%;
				text-align: center;
			}
			
			table.number_input td {
				border: 1px solid #BBBBBB;
				border-right: 0;
				width: 10%;
				height: 40px;
			}
			
			table.number_input td:last-child {
				border-right: 1px solid #BBBBBB;
			}
			
			table.number_input td i.iconfont {
				display: none;
			}
			
			.mui-popover#inputArea table.keyboard {
				text-align: center;
				width: 100%;
				background-color: #FFFFFF;
			}
			
			.mui-popover#inputArea table.keyboard td {
				border: 1px solid #BBBBBB;
				width: 33%;
				font-size: 26px;
				color: #444;
			}
			
			.mui-popover#inputArea table.keyboard td.mui-table-view-cell:after {
				display: none;
			}
			
			.mui-popover#inputArea p {
				padding: 5px;
			}
			
			.mui-popover#inputArea p.title {
				color: #FEB406;
			}
			
			.mui-popover#inputArea p label {
				display: inline-block;
				width: 50%;
				text-align: center;
			}
			
			.mui-popover#inputArea p span {
				color: #333333;
				display: inline-block;
				width: 50%;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">提现</h1>
		</header>
		
		<div class="mui-content">
			<div class="balance">
				<p>可提现金额(元)<span id="balance"></span></p>
			</div>
			<h5 class="min-title">选择账户</h5>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right main-account" href="#accountList" id="main-account"></a>
				</li>
			</ul>
			<h5 class="min-title">提现金额<span class="mui-pull-right">全部提现</span></h5>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<input type="number" id="total" class="mui-input-clear mui-input  mui-text-center">
				</div>
			</form>
			<h5 class="min-title">留言</h5>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<input type="text" id="desc" class="mui-input-clear mui-input  mui-text-center">
				</div>
			</form>
			<p class="mui-text-center preout">本次提现需缴纳手续费<span>12</span>元</p>
			<div id="accountList" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view" id="account-list"></ul>
			</div>
			<div id="inputArea" class="mui-popover mui-popover-action">
				<p class="title mui-text-center">信息确认</p>
				<p class="conf-total"><label>提现金额：</label><span></span></p>
				<p class="conf-account"><label>提现账户：</label><span></span></p>
				<p class="conf-desc"><label>留言：</label><span></span></p>
				<table class="number_input">
					<tr>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
						<td class="input-item">
							<i class="iconfont">&#xe62a;</i>
						</td>
					</tr>
				</table>
				<table class="keyboard" border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td class="keyboard-number mui-table-view-cell">1</td>
							<td class="keyboard-number mui-table-view-cell">2</td>
							<td class="keyboard-number mui-table-view-cell">3</td>
						</tr>
						<tr>
							<td class="keyboard-number mui-table-view-cell">4</td>
							<td class="keyboard-number mui-table-view-cell">5</td>
							<td class="keyboard-number mui-table-view-cell">6</td>
						</tr>
						<tr>
							<td class="keyboard-number mui-table-view-cell">7</td>
							<td class="keyboard-number mui-table-view-cell">8</td>
							<td class="keyboard-number mui-table-view-cell">9</td>
						</tr>
						<tr>
							<td class="reset iconfont mui-table-view-cell">&#xe603;</td>
							<td class="keyboard-number mui-table-view-cell">0</td>
							<td class="cancel iconfont mui-table-view-cell">&#xe61d;</td>
						</tr>
					</tbody>
				</table>
			</div>
			<button class="mui-btn btn-main btn-block next">下一步</button>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var accountList = document.getElementById("account-list"); // 可选账户列表
		var selectAccount = document.getElementById("main-account"); // 当前默认账户
		var balanceElem = document.getElementById("balance"); // 可提现余额
		var drawMoneyElem = document.getElementById("total"); // 提现金额
		var descElem = document.getElementById("desc"); // 留言
//		var payChannel; // 支付渠道
		var pwdArr = []; // 支付密码
		var $preoutElem = $(".preout"); // 显示提现手续费区域
		var $inputRow = $(".number_input"); // 输入密码后显示区域
		var selectAccountId; // 提现目标账户id
		mui.plusReady(function() {
			var url = baseURL + 'account/getBalance.json';
			Common.ajax({
					url : url
				}, function(data) {
				console.log(JSON.stringify(data));
				if(data.code == 1) {
					balanceElem.innerHTML = data.balance.money / 100;
				} else {
					mui.toast('获取余额失败，请稍后重试');
				}
			}, function(xhr) {
				mui.toast('网络异常，请稍后再试');
				console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
			})
			
			Common.ajax({
				url : baseURL + 'account/bandCardList.json'
			}, function(data) {
				console.log(JSON.stringify(data));
				if(data.code == 1) {
					var data = data.cardList;
					for (var i = 0; i < data.length; i++) {
						if(data[i].isMaster) {
							selectAccountId = data[i].accountCardId;
							$(selectAccount).text(data[i].cardNo);
						} else {
							$(selectAccount).text('请选择');
						}
						var item = document.createElement("li");
						item.id = data[i].accountCardId;
						item.channel = data[i].bank;
						item.className = 'mui-table-view-cell';
						item.innerHTML = '<a href="#">' + data[i].cardNo + '</a>';
						accountList.appendChild(item);
					}
				} else {
					mui.toast('获取账户信息失败，请稍后重试');
				}
			}, function(xhr) {
				mui.toast('网络异常，请稍后再试');
				console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
			})
			
			// 选择账户
			mui('#accountList').on('tap','.mui-table-view-cell',function(){
				$(selectAccount).text($(this).find('a').text());
				selectAccountId = this.id;
//				payChannel = this.channel;
				mui('#accountList').popover('hide');
			})
			
			// 全部提现
			mui('h5').on('tap','.mui-pull-right',function(){
				drawMoneyElem.value = document.getElementById("balance").innerText;
			})
			
			//  获取提现所需手续费
			drawMoneyElem.onblur = function() {
				var url = baseURL + 'account/preOutAccount/' + drawMoneyElem.value * 100 + '.json';
				console.log(url);
				Common.ajax({
					url : baseURL + 'account/preOutAccount/' + drawMoneyElem.value * 100 + '.json'
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						$preoutElem.show().find('span').text(data.fee / 100);
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			}
			
			mui('.mui-content').on('tap','button.next',function(){
				drawMoneyElem.blur();
				descElem.blur();
				if(selectAccount.innerHTML == '请选择提现账户') {
					mui.toast('您尚未选择提现账户');
				} else if(!/^(([1-9]\d{0,5})|0)(\.\d{1,2})?$/.test(drawMoneyElem.value) || drawMoneyElem.value == 0) {
					mui.toast('您填写的金额不正确，请重新填写');
					drawMoneyElem.value = '';
				} else if (!drawMoneyElem.value || Number(drawMoneyElem.value) > Number(balanceElem.innerText)) {
					mui.toast('您填写的金额不正确，请重新填写');
					drawMoneyElem.value = '';
				} else {
					setTimeout(function() {
						mui('#inputArea').popover('show');
					}, 500)
					// 信息填入确认框
					$("#inputArea .conf-total span").text(drawMoneyElem.value + ' ( 元 )');
					$("#inputArea .conf-account span").text(selectAccount.innerText);
					$("#inputArea .conf-desc span").text(descElem.value);
				}
			})
			
			// 键盘输入
			mui('#inputArea').on('tap', 'td', function() { 
				if($(this).hasClass('keyboard-number')) { // 输入数字
					if(pwdArr.length == 6) {
						return;
					}
					pwdArr.push($(this).text());
					$inputRow.find('.iconfont:hidden:first').show();
				} else {
					if($(this).hasClass('reset')) { // 重新输入
						pwdArr = [];
						$inputRow.find('.iconfont').hide();
					} else { // 退格
						pwdArr.pop();
						$inputRow.find('.iconfont:visible:last').hide();
					}
				}
				if($inputRow.find('.iconfont:last').is(':visible')) {
					plus.nativeUI.showWaiting();
					var url = baseURL + 'account/outAccount/' + drawMoneyElem.value * 100 + '/' + 'bank';
					url += '/' + selectAccountId + '/' + pwdArr.join('') + '.json?desc=' + descElem.value;
					Common.ajax({
						url : url,
						type : 'POST'
					}, function(data) {
						console.log(JSON.stringify(data));
						mui('#inputArea').popover('hide');
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							// 提现成功后显示成功页
							var successPage = plus.webview.create('pay-status.html', 'pay-status', {}, {
								payinfo : {
									paytitle : '提现请求已受理',
									paytype : '提现',
									paycode : 1,
									paycount : drawMoneyElem.value,
									paytime : new Date().toLocaleString()
								}
							})
							successPage.show('slide-in-bottom', 200);
							successPage.onclose = function() {
								mui.back();
								var openerPage = plus.webview.currentWebview().opener();
								mui.fire(openerPage, 'reload');
							}
						} else {
							pwdArr = [];
							$inputRow.find('.iconfont').hide();
							mui.toast('操作失败，' + data.msg);
						}
						plus.nativeUI.closeWaiting();
					}, function(xhr) {
						plus.nativeUI.closeWaiting();
						pwdArr = [];
						$inputRow.find('.iconfont').hide();
						mui('#inputArea').popover('hide');
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
					console.log(url);
				}
			})
			
		})
	</script>
</html>